import React, { PureComponent } from 'react';
import { CardC, IconC } from '../../../components';
import { connect, routerRedux } from 'dva';
import myStyle from './style.less';
import { Tooltip } from 'antd';

@connect(({ systemNoticeSettingM }) => ({ systemNoticeSettingM }))
export default class MyCard extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  // 跳转到对应页面
  goToPath = (path) => {
    if (path && path.includes('noStandard')) {
      path = '/noStandard';
    }
    if (path && path.includes('Barra')) {
      path = '/Barra';
    }
    if (path && path.includes('penetrate')) {
      path = '/penetrate';
    }
    this.props.dispatch(routerRedux.push(`${path}`));
  };

  // 查找租户中文名
  findTenantName = (arr) => {
    const data = [];
    arr.map((x) => {
      this.props.fullTenants.map((item) => {
        if (item.value == x) data.push(item.title);
      });
    });
    return data.map((item, key) => {
      return <div key={key}>{item}</div>;
    });
  };

  render() {
    const { itemData = {}, type } = this.props;
    const topDiv = () => {
      return (
        <div className={myStyle.mytop}>
          <div title={itemData.title}>{itemData.title}</div>
          {type == '1' && (
            <IconC
              hoverAfter={true}
              className={myStyle.myIcon}
              isHover={false}
              style={{ marginRight: '12px' }}
              type={itemData.isWarning ? 'editWarning' : 'edit'}
              onClick={(e) => {
                this.props.editData(itemData);
              }}
            />
          )}
          {type == '1' && (
            <IconC
              hoverAfter={true}
              className={myStyle.myIcon}
              isHover={false}
              type={itemData.isWarning ? 'delWarning' : 'delete'}
              onClick={(e) => {
                this.props.deleteData(itemData);
              }}
            />
          )}
        </div>
      );
    };
    const content = () => {
      return (
        <div>
          {/* 上线日期 */}
          <div className={itemData.isWarning ? `${myStyle.bodyTop} ${myStyle.bodyTop1}` : myStyle.bodyTop}>
            <div>
              <div>{itemData.launchDate || '--'}</div>
              <span>上线日期</span>
            </div>
            <div>
              <div>
                <Tooltip title={itemData.isWarning && this.props.type == '1' ? this.findTenantName(itemData.remindTenants) : ''}>
                  {itemData.isWarning ? '部分租户' : '所用租户'}
                </Tooltip>
              </div>
              <span>提醒租户</span>
            </div>
          </div>
          {/* 涉及页面 */}
          <div className={myStyle.bodyMiddle}>
            <div>涉及页面：</div>
            <div>
              {itemData.involvedPages?.length
                ? itemData.involvedPages.map((item, key) => {
                    return (
                      <div key={key} className={itemData.isWarning ? `${myStyle.label} ${myStyle.label1}` : myStyle.label} onClick={() => this.goToPath(item.pageUrl)}>
                        {item.pageName}
                      </div>
                    );
                  })
                : '--'}
            </div>
          </div>
          {/* 功能描述 */}
          <div className={myStyle.bodyBottom}>
            <div>功能描述：</div>
            <div>{itemData.functionalDescription || '--'}</div>
          </div>
        </div>
      );
    };
    return <CardC cardId={itemData.id} Top={topDiv()} Content={content()} type={itemData.isWarning ? 'orange' : 'blue'} width='100%' height='301px' />;
  }
}
